<script setup>
import { ref } from 'vue'

const planningProjects = ref([
  {
    id: 1,
    name: '城东新区地铁规划',
    phase: '2025-2030',
    status: 'planning',
    budget: 158000,
    lines: 3,
    stations: 35,
    coverage: 68,
    progress: 45
  },
  {
    id: 2,
    name: '机场快线工程',
    phase: '2024-2026',
    status: 'approved',
    budget: 89000,
    lines: 1,
    stations: 12,
    coverage: 25,
    progress: 60
  }
])

const selectedProject = ref(planningProjects.value[0])

const budgetAnalysis = ref({
  construction: 65,
  equipment: 20,
  design: 8,
  other: 7
})

const populationData = ref([
  { year: 2024, value: 850000 },
  { year: 2025, value: 920000 },
  { year: 2026, value: 980000 },
  { year: 2027, value: 1050000 },
  { year: 2028, value: 1150000 }
])

const riskFactors = ref([
  { name: '地质风险', level: 'medium', score: 65 },
  { name: '工期延误', level: 'low', score: 35 },
  { name: '成本超支', level: 'high', score: 85 },
  { name: '技术难度', level: 'medium', score: 55 }
])
</script>

<template>
  <div class="planning-container">
    <div class="main-content">
      <div class="projects-section">
        <div class="section-header">
          <h2>规划项目</h2>
          <button class="new-project-btn">
            <span class="icon">+</span>
            新建规划
          </button>
        </div>

        <div class="projects-grid">
          <div 
            v-for="project in planningProjects"
            :key="project.id"
            class="project-card"
            :class="{ active: selectedProject.id === project.id }"
            @click="selectedProject = project"
          >
            <div class="project-header">
              <h3>{{ project.name }}</h3>
              <span :class="['status-badge', project.status]">
                {{ project.status === 'planning' ? '规划中' : '已批准' }}
              </span>
            </div>
            <div class="project-info">
              <div class="info-item">
                <span class="label">建设期</span>
                <span class="value">{{ project.phase }}</span>
              </div>
              <div class="info-item">
                <span class="label">预算</span>
                <span class="value">{{ project.budget }}万</span>
              </div>
              <div class="info-item">
                <span class="label">线路数</span>
                <span class="value">{{ project.lines }}条</span>
              </div>
              <div class="info-item">
                <span class="label">站点数</span>
                <span class="value">{{ project.stations }}座</span>
              </div>
            </div>
            <div class="project-progress">
              <div class="progress-info">
                <span>完成进度</span>
                <span>{{ project.progress }}%</span>
              </div>
              <div class="progress-bar">
                <div class="progress" :style="{ width: project.progress + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="analysis-section">
        <div class="section-header">
          <h2>项目分析</h2>
          <div class="time-range">
            <button class="range-btn active">5年</button>
            <button class="range-btn">10年</button>
            <button class="range-btn">15年</button>
          </div>
        </div>

        <div class="analysis-grid">
          <div class="analysis-card budget">
            <h3>预算分配</h3>
            <div class="budget-chart">
              <div 
                v-for="(value, key) in budgetAnalysis" 
                :key="key"
                class="budget-item"
              >
                <div class="budget-bar">
                  <div class="bar" :style="{ width: value + '%' }"></div>
                </div>
                <div class="budget-info">
                  <span class="budget-name">{{ key }}</span>
                  <span class="budget-value">{{ value }}%</span>
                </div>
              </div>
            </div>
          </div>

          <div class="analysis-card population">
            <h3>人口预测</h3>
            <div class="population-chart">
              <div 
                v-for="data in populationData" 
                :key="data.year"
                class="population-bar"
                :style="{ height: (data.value / 12000) + 'px' }"
              >
                <span class="value">{{ (data.value / 10000).toFixed(1) }}万</span>
                <span class="year">{{ data.year }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="side-panel">
      <div class="risk-assessment">
        <h3>风险评估</h3>
        <div class="risk-list">
          <div 
            v-for="risk in riskFactors"
            :key="risk.name"
            class="risk-item"
          >
            <div class="risk-header">
              <span class="risk-name">{{ risk.name }}</span>
              <span :class="['risk-level', risk.level]">
                {{ risk.level === 'high' ? '高' : risk.level === 'medium' ? '中' : '低' }}
              </span>
            </div>
            <div class="risk-bar">
              <div 
                class="risk-progress"
                :style="{ width: risk.score + '%', backgroundColor: risk.level === 'high' ? '#ef4444' : risk.level === 'medium' ? '#f59e0b' : '#22c55e' }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="recommendations">
        <h3>优化建议</h3>
        <div class="recommendations-list">
          <div class="recommendation-item">
            <span class="icon">💡</span>
            <div class="content">
              <p class="title">优化站点布局</p>
              <p class="desc">建议增加城东区域站点密度</p>
            </div>
          </div>
          <div class="recommendation-item">
            <span class="icon">⚡</span>
            <div class="content">
              <p class="title">提升运力配置</p>
              <p class="desc">高峰时段运力预计不足</p>
            </div>
          </div>
          <div class="recommendation-item">
            <span class="icon">📊</span>
            <div class="content">
              <p class="title">调整投资比例</p>
              <p class="desc">建议增加设备投资占比</p>
            </div>
          </div>
        </div>
      </div>

      <div class="quick-actions">
        <button class="action-btn">
          <span class="action-icon">📋</span>
          生成报告
        </button>
        <button class="action-btn">
          <span class="action-icon">💾</span>
          导出数据
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.planning-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  min-height: calc(100vh - 72px);
  padding: 20px;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 24px;
  color: #0f172a;
}

.new-project-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0f172a;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.new-project-btn:hover {
  background: #1e293b;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-card.active {
  border: 2px solid #0f172a;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.project-header h3 {
  font-size: 18px;
  color: #0f172a;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
}

.status-badge.planning {
  background: #fff7ed;
  color: #9a3412;
}

.status-badge.approved {
  background: #f0fdf4;
  color: #166534;
}

.project-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item .label {
  font-size: 14px;
  color: #64748b;
}

.info-item .value {
  font-size: 16px;
  color: #0f172a;
  font-weight: 500;
}

.project-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  color: #64748b;
  font-size: 14px;
}

.progress-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #0f172a;
  border-radius: 4px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.analysis-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.analysis-card h3 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 20px;
}

.budget-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.budget-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.budget-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.budget-bar .bar {
  height: 100%;
  background: #0f172a;
  border-radius: 4px;
}

.budget-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.budget-name {
  color: #64748b;
}

.budget-value {
  color: #0f172a;
  font-weight: 500;
}

.population-chart {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 20px 0;
}

.population-bar {
  flex: 1;
  background: #0f172a;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.3s;
}

.population-bar .value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #64748b;
}

.population-bar .year {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #64748b;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.risk-assessment,
.recommendations {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.risk-assessment h3,
.recommendations h3 {
  font-size: 18px;
  color: #0f172a;
  margin-bottom: 20px;
}

.risk-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.risk-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.risk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk-name {
  font-size: 14px;
  color: #64748b;
}

.risk-level {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.risk-level.high {
  background: #fef2f2;
  color: #ef4444;
}

.risk-level.medium {
  background: #fffbeb;
  color: #f59e0b;
}

.risk-level.low {
  background: #f0fdf4;
  color: #22c55e;
}

.risk-bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.risk-progress {
  height: 100%;
  border-radius: 4px;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recommendation-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.recommendation-item .icon {
  font-size: 24px;
}

.recommendation-item .title {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 4px;
}

.recommendation-item .desc {
  font-size: 12px;
  color: #64748b;
}

.quick-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.action-btn:hover {
  transform: translateY(-2px);
}

.action-icon {
  font-size: 24px;
}

@media (min-width: 1920px) {
  .planning-container {
    grid-template-columns: 1fr 400px;
  }

  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}
</style> 